<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center overflow-hidden">
		<z-paging ref="paging" v-model="listData" @query="queryList">
			<template #top>
				<view class="navBar w-full pl-30 pt-40 z-9999">
					<view class="text-581403 f-40 text-bold flex justify-center align-items-center">
						活动公告
					</view>
				</view>
			</template>
			<view class="list-item w-690 mt-20 m-auto p-40 overflow-hidden" :class="[index===0 ? 'mt-40' :''] "
				v-for="(item,index) in listData" :key="index"
				@click="$toPage(`/pages/activity-list/detail?id=${item.id}&type=info`)">
				<view class="content h-full overflow-y flex flex-col justify-center">
					<view class="text-581403 f-28 f-28">
						<text class="text-500">主题：</text>
						<text class="text-bold">{{ item.title }}</text>
					</view>
					<view class="text-581403 f-28 f-28 mt-15">
						<text class="text-500">时间：</text>
						<text class="text-bold">{{ dayjs(item.startTime).format("YYYY-MM-DD HH:mm") }}</text>
					</view>
					<view class="text-581403 f-28 f-28 mt-15">
						<text class="text-500">地址：</text>
						<text class="text-bold">{{ item.address }}</text>
					</view>
					<!-- <view class="text-581403 f-28 f-28 mt-15 flex">
						<text class="text-500 flex-none">内容：</text>
						<text class="text-bold">{{ item.content }}</text>
					</view> -->
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	const { api_get_bulletinsPage } = useRequest();
	const { proxy } = getCurrentInstance();

	const paging = ref(null);
	const listData = ref([]);
	const queryList = (pageNo, pageSize) => {
		api_get_bulletinsPage({ page: pageNo - 1, size: pageSize }).then(res => {
			paging.value.complete(res.content);
		}).catch(res => {
			paging.value.complete(false);
		});
	};
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('/src/static/bg-08.png');
		background-size: 100% 100%;
	}

	.list-item {
		height: 240rpx;
		background-image: url('/src/static/bg-11.png');
		background-size: 100% 100%;
		overflow-y: auto;

		.content {
			scrollbar-width: none;
			/* Firefox 兼容 */
			-ms-overflow-style: none;
			/* IE/Edge 兼容 */
		}
	}
</style>